import { DirectiveBinding } from 'vue'
import { useUserStore } from '@/store'

const hasAnyRole = (el: HTMLElement, binding: DirectiveBinding) => {
  const { roles } = useUserStore()
  if (!binding.value?.filter((role: string) => roles?.includes(role))?.length && el.parentNode) {
    el.parentNode.removeChild(el)
  }
}

export default {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    hasAnyRole(el, binding)
  },
  updated(el: HTMLElement, binding: DirectiveBinding) {
    hasAnyRole(el, binding)
  },
}
